light mode
night mode
On This Page

Ajax এর মাধ্যমে Database থেকে ডেটা রিকোয়েস্ট করা

OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এর মাধ্যমে ডাটাবেস থেকে ডেটা রিকোয়েস্ট করা একটি সাধারণ এবং কার্যকরী পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে। Ajax এর মাধ্যমে একটি ক্লায়েন্ট-সাইড রিকোয়েস্ট সার্ভারে পাঠানো হয়, যেখানে PHP স্ক্রিপ্ট ডাটাবেস থেকে ডেটা ফেচ করে এবং রেসপন্স হিসাবে JSON বা HTML আউটপুট করে পাঠায়। ক্লায়েন্ট সাইডে সেই ডেটা প্রসেস করে ডায়নামিকভাবে UI-তে দেখানো হয়।

উদাহরণ: Ajax এর মাধ্যমে Database থেকে ডেটা রিকোয়েস্ট করা

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Database Request Example</title>
</head>
<body>
    <h1>Employee List</h1>
    <button onclick="fetchEmployeeData()">Fetch Employees</button>
    <div id="employee-container">
        <!-- ডেটা এখানে দেখানো হবে -->
    </div>

    <script>
        function fetchEmployeeData() {
            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // GET রিকোয়েস্ট ওপেন করা
            xhr.open("GET", "fetch_employees.php", true);

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হলে
                    if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
                        var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                        var output = "<h2>Employees:</h2><ul>";
                        data.forEach(function(employee) {
                            output += `<li>${employee.name} - ${employee.email}</li>`;
                        });
                        output += "</ul>";
                        document.getElementById("employee-container").innerHTML = output;
                    } else {
                        document.getElementById("employee-container").innerHTML = "Error fetching data.";
                    }
                }
            };

            // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
            xhr.onerror = function() {
                document.getElementById("employee-container").innerHTML = "Network error occurred. Please try again.";
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send();
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি শিরোনাম (<h1>), একটি বোতাম (<button>), এবং একটি <div> এলিমেন্ট রয়েছে।
  • "Fetch Employees" বোতামে ক্লিক করলে fetchEmployeeData() ফাংশন কল হবে, যা Ajax এর মাধ্যমে fetch_employees.php ফাইলে একটি GET রিকোয়েস্ট পাঠাবে।
  • employee-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত ডেটা বা ত্রুটি মেসেজ দেখানো হবে।

২. PHP স্ক্রিপ্ট (fetch_employees.php):

<?php
// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500); // Internal Server Error
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// SQL কুয়েরি
$sql = "SELECT name, email FROM employees";
$result = $conn->query($sql);

// ডেটা রেসপন্স তৈরি করা
$employees = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }
}

// JSON ফরম্যাটে হেডার সেট করা
header('Content-Type: application/json');

// JSON ফরম্যাটে ডেটা রিটার্ন করা
echo json_encode($employees);

// ডাটাবেস কানেকশন বন্ধ করা
$conn->close();
?>

বিস্তারিত ব্যাখ্যা:

  1. ডাটাবেস কানেকশন:
    • ডাটাবেসের সাথে কানেকশন সেটআপ করা হয়েছে, যেখানে localhost এ MySQL সার্ভার কানেক্ট করা হয়েছে।
  2. SQL কুয়েরি:
    • SQL কুয়েরি ব্যবহার করে employees টেবিল থেকে name এবং email কলামগুলো ফেচ করা হয়েছে।
  3. JSON ফরম্যাটে ডেটা রিটার্ন করা:
    • ফেচ করা ডেটা $employees অ্যারেতে স্টোর করা হয়েছে।
    • json_encode() ফাংশন ব্যবহার করে ডেটা JSON ফরম্যাটে কনভার্ট করা হয়েছে এবং PHP এর header('Content-Type: application/json'); দিয়ে JSON হেডার সেট করা হয়েছে।

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. JavaScript এবং HTML:
    • ব্যবহারকারী যখন "Fetch Employees" বোতামে ক্লিক করে, তখন fetchEmployeeData() ফাংশন কল হয়।
    • ফাংশনটি একটি Ajax GET রিকোয়েস্ট পাঠায় fetch_employees.php এ।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ডাটাবেস থেকে ইউজারদের ডেটা ফেচ করে এবং JSON ফরম্যাটে রেসপন্স করে।
  3. JavaScript JSON প্রসেসিং:
    • Ajax রিকোয়েস্ট সফল হলে, JSON ডেটা প্রসেস করা হয় এবং HTML এ ডায়নামিকভাবে ইনজেক্ট করা হয়।

Ajax এবং Database এর মাধ্যমে ডেটা ফেচ করার সুবিধা:

  • পেজ রিফ্রেশ ছাড়াই ডেটা আপডেট: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডাইনামিক ডেটা লোড এবং আপডেট করা যায়।
  • JSON ফরম্যাটে ডেটা রেসপন্স: PHP থেকে JSON ফরম্যাটে ডেটা পাঠানো হয়েছে, যা JavaScript এর মাধ্যমে সহজে প্রসেস করা যায়।
  • অ্যাসিনক্রোনাস যোগাযোগ: Ajax অ্যাসিনক্রোনাসভাবে ডেটা রিকোয়েস্ট করে, যার ফলে ব্যবহারকারী পেজে অন্য কাজ করতে পারে এবং ডেটা লোড হওয়ার সাথে সাথে তা দেখানো যায়।
  • ডায়নামিক রেসপন্স: Ajax এর মাধ্যমে PHP স্ক্রিপ্ট এক্সিকিউট করে ডায়নামিক রেসপন্স পাওয়া যায় এবং তা UI এ দেখানো যায়।

সারসংক্ষেপ:

  • Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে ডাইনামিক ডেটা ফেচ এবং প্রদর্শন করা হয়েছে, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।
  • JavaScript এবং PHP Integration: JavaScript এর মাধ্যমে Ajax GET রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট সার্ভারে এক্সিকিউট করে ডেটা প্রদান করেছে।
  • Dynamic Data Display: ব্যবহারকারী পেজ রিলোড ছাড়াই ডেটা দেখতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে।

আরও দেখুন...

On This Page

or

Don't have an account? Register

Promotion